<template>
  <div style="height: 100%">
    <el-container>
      <el-main>
        <el-tabs type="border-card">
          <el-tab-pane label="角色列表">
            <!--form-->
            <el-card class="card-container">
              <el-form v-model="roleForm">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="角色名称">
                      <el-input v-model="roleForm.roleName" placeholder="请输入角色编码"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="状态">
                      <el-select placeholder="请选择启动状态">
                        <el-option
                          v-for="item in dicts.system_global_status"
                          :key="item.id"
                          :value="item.k"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item>
                      <el-button icon="search" type="primary" @click="getRolePage">搜索</el-button>
                      <el-button icon="refreshLeft" @click="menuReset">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <!--table-->
            <el-card>
              <div class="toolbar">
                <el-button icon="plus" type="primary" @click="btnRoleDialog">新增</el-button>
              </div>
              <el-table :data="tableData" border>
                <el-table-column type="selection"></el-table-column>
                <el-table-column
                  prop="roleName"
                  align="center"
                  v-auths="'system:role:delete'"
                  label="角色名称"
                ></el-table-column>
                <el-table-column prop="rolePerm" align="center" label="权限字符"></el-table-column>
                <el-table-column label="是否启用" align="center">
                  <template #default="{ row }">
                    <el-tag>{{ row.enabled == '1' ? '启用' : '禁用' }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  align="center"
                  label="创建时间"
                  :formatter="formatter"
                ></el-table-column>
                <el-table-column label="操作" align="center" width="220" fixed="right">
                  <template #default="{ row }">
                    <div class="sys-table-main-actions">
                      <el-link
                        icon="edit"
                        type="primary"
                        :underline="false"
                        @click="btnRoleDialog(row.id)"
                        >编辑</el-link
                      >
                      <el-link
                        icon="delete"
                        type="danger"
                        :underline="false"
                        style="margin: 0 8px"
                        @click="roleDel(row.id)"
                        >删除</el-link
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="totals"
                @update:current-page="handleCurrentPageUpdate"
                @update:page-size="handlePageSizeUpdate"
              >
              </pagination>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="回收站">回收站</el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <roleDialog
      v-if="dialogVisible"
      @getRolePage="getRolePage"
      v-model:dialogVisible="dialogVisible"
      @role-change="getRolePage"
      :roleUpdateId="roleUpdateId"
    ></roleDialog>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  toRefs,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  ComponentInternalInstance
} from 'vue'
import type { TableColumnCtx } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { rolePage, Role, roleDelete } from '@api/role'
import roleDialog from './roleDialog.vue'
import tool from '@utils/tool'
const tableData = ref<Role[]>([])
//控制dialog显示
const dialogVisible = ref<boolean>(false)
const state = reactive({
  roleForm: {
    current: 1,
    size: 10,
    total: 0,
    roleName: '',
    enabled: ''
  },
  totals: 0,
  roleUpdateId: ''
})

const { roleForm, totals, roleUpdateId } = toRefs(state)
onBeforeMount(() => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    ;(proxy as any).getDicts(['system_global_status', 'system_global_gender'])
  }

  getRolePage()
})

const getRolePage = async () => {
  const res = await rolePage(roleForm.value)
  const { records, total } = res.data
  totals.value = total
  tableData.value = records
}

//重置
const menuReset = () => {
  roleForm.value.roleName = ''
  roleForm.value.enabled = ''
  getRolePage()
}
//分页-页码
const handleCurrentPageUpdate = (current: number) => {
  roleForm.value.current = current
  getRolePage()
}
//分页-一页显示多少条
const handlePageSizeUpdate = (page: number) => {
  roleForm.value.size = page
  getRolePage()
}
//时间戳转换为标准时间
const formatter = (row: Role, column: TableColumnCtx<Role>, timeValue: number) => {
  return tool.dateFormat(timeValue)
}

//新增角色-按钮
const btnRoleDialog = (id: string) => {
  if (typeof id == 'string') {
    roleUpdateId.value = id
  } else {
    roleUpdateId.value = ''
  }
  dialogVisible.value = true
}
//删除
const roleDel = (id: string) => {
  ElMessageBox.confirm('是否删除角色', {
    type: 'error',
    confirmButtonText: '删除',
    cancelButtonText: '取消'
  })
    .then(async () => {
      const res = await roleDelete(id)
      if (res.code != 200) {
        ElMessage({
          type: 'error',
          message: res.message
        })
      } else {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      }

      getRolePage()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
</script>

<style scoped>
.card-container,
.toolbar {
  margin-bottom: 15px;
}

.el-table {
  font-size: 12px;
}
</style>
